<template>
<!-- 公告 -->
<div class="notice_div">
    <div class="notice">
        <div class="notice-left">
            <i class="iconfont icon-iconfontdaohanggonggao font1"></i>
        </div>
        <div class="notice-line"></div>
        <div class="ul-notice">
            <marquee style="width: 100%;" scrollamount="1" direction="up" behaviour="Scroll"  loop="-1"  onMouseOver="this.scrollDelay=500" onMouseOut="this.scrollDelay=1">
                <ul>
                    <li v-for="item in noticelist" :key="item.type">
                        <router-link :to="{name:'notice',params:{id:item.id}}" replace>{{item.title}}</router-link>
                    </li>
                    <div class="clearB"></div>
                </ul>
            </marquee>
        </div>
    </div>
</div>
</template>

<script>
export default {
  props: ['noticelist'],
  data () {
    return {

    }
  },
  mounted: function() {
    
  },
  updated: function() {

  },
  methods: {
  }
}
</script>
<style lang="less">
    .icon-iconfontdaohanggonggao{
        display: inline-block;
        font-size: 30px;
        margin: 0 auto;
        transform: translateY(-50%);
        margin-top: 58%;
    }
    .clearB{
        clear:both;
    }
    .notice_div{
        background-color: #fff;
        padding-top:.26rem;
        padding-bottom:0.05rem;
    }
    .notice {
        margin-top: .4rem;
        overflow: hidden;
        width: 8.933rem;
        height: 1.6rem;
        margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 0 1px 9px 0 rgba(0,0,0,0.12);
        .notice-left img {
            width: .688rem;
            height: .608rem;
            line-height: 1.6rem;
            margin:  .48rem .357rem;
        }
        .notice-line {
            float: left;
            width: .014rem;
            margin-top: .426rem;
            height: .8rem;
            background-color: #ddd;
        }
        .notice-left {
            float: left;
            width: 1.333rem;
            height: 100%;
            text-align: center;
        }
        .ul-notice{
            float: left;
            width: 83%;
            overflow-y: hidden;   
            height: 2.7rem;
            margin-top: .22rem;
            position: relative;
        }
        marquee{
            position: absolute;
            top: -.4rem;
            left: .4rem;
            height: 1.4rem;
        }
        ul{ 
            height: auto;
            overflow: hidden;
        }
        li{ 
            width:90%;
            position: relative;
            margin-right: .5rem;
            margin-left: .1rem;
            height: .54rem;
            margin: 1rem 0;
            font-size: .3733rem;
            letter-spacing: 0.01rem;
        }
        li:nth-child(1){
            margin-top:0;
        }
        li:nth-last-child(1){
            margin-bottom:0;
        }
        ul li a{
            position: absolute;
            display: inline-block;
            vertical-align: middle;
            top: 0rem;
            height: 1.1rem;
            overflow: hidden;
            color: #333333;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

    }
</style>

